<template>
  <div>
    <el-container>
      <el-header class="header" height="36px">
        <page_title />
        <div class="aside-box">
          <el-input class="input" v-model="searchContent" placeholder="搜索" @change="getMemberList" clearable>
            <template #prefix>
              <i class="iconfont icon-search" />
            </template>
          </el-input>
        </div>
      </el-header>

      <el-main class="main-box">
        <el-table :data="memberData" highlight-current-row style="width: 100%" :row-style="{ height: '9vh' }">
          <el-table-column property="id" label="会员ID" width="100" align="center" />
          <el-table-column property="nickname" label="会员昵称" align="center" />
          <el-table-column property="phone" label="联系方式" align="center" />
          <el-table-column property="points" label="积分" width="180" align="center" />
          <el-table-column property="createdAt" label="注册时间" width="220" align="center" />
          <el-table-column fixed="right" label="操作" width="240" align="center">
            <template #default="{ row }">
              <div class="operation-box">
                <el-switch v-model="row.status" class="switch-status" inline-prompt width="60" size="large"
                  :active-text="status[0].label" :active-value="status[0].value" :inactive-text="status[1].label"
                  :inactive-value="status[1].value" @change="updateMemberStatus(row)">
                  <template #active-action>
                    <i class="iconfont icon-switch" />
                  </template>
                  <template #inactive-action>
                    <i class="iconfont icon-switch" />
                  </template>
                </el-switch>
                <div class="operation" @click="handleEdit(row)">
                  <i class="iconfont icon-edit" />
                </div>
                <el-popconfirm placement="top" width="100" confirm-button-text="确定" cancel-button-text="取消"
                  :hide-after="50" hide-icon title="要删除该用户吗？" @confirm="handleDelete(row.id)">
                  <template #reference>
                    <div class="operation">
                      <i class="iconfont icon-delete" />
                    </div>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="dataTotal" :size="pageSize" :current="pageNo" @change="handlePageChange" />
      </el-main>
    </el-container>

    <div class="dialog-box">
      <el-dialog v-model="formDialogVisible" :title="formTitle" width="50%" center draggable>
        <el-form ref="formRef" label-width="auto" :model="formData" :rules="checkForm">
          <el-form-item label="会员昵称">
            <el-input v-model="formData.nickname" placeholder="请输入会员昵称" clearable />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formData.phone" placeholder="请输入联系方式" clearable />
          </el-form-item>
          <el-form-item label="积分">
            <el-input v-model="formData.points" placeholder="请输入积分" clearable />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footer">
            <el-button @click="formDialogVisible = false">取消</el-button>
            <el-button class="button" color="#53BEC9" @click="submitForm">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import page_title from '@/components/page_title.vue';
import pagination from '@/components/pagination.vue';

onMounted(() => {
  getMemberList()
})

// 搜索内容
const searchContent = ref('');
const search = () => {
};

// 定义响应式字段长度
const columnLength = ref(240);
columnLength.value = window.innerWidth * 0.3;

// 表格数据相关字段
const memberData = ref([]);
const dataTotal = ref(0);
const pageNo = ref(1);
const pageSize = ref(8);
// 获取数据
import { getMemberListService } from '@/api/user';
const getMemberList = async () => {
  let memberQuery = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    keyWord: searchContent.value
  }
  const res = await getMemberListService(memberQuery)
  if (res.code === 0) {
    memberData.value = res.data.list
    dataTotal.value = parseInt(res.data.total)
  }
}
watch(() => pageNo.value, () => {
  getMemberList()
})

// 修改会员状态
const status = [
  { value: 1, label: '正常' },
  { value: 2, label: '冻结' }
]
const updateMemberStatus = async (row) => {
  let memberQuery = {
    id: row.id,
    status: row.status
  }
  const res = await updateMemberService(memberQuery)
  if (res.code !== 0) {
    ElMessage.error(res.message)
  }
}

// 表单内容相关
const formTitle = ref('编辑')
const formDialogVisible = ref(false)
const formData = ref({})

// 编辑
const handleEdit = (row) => {
  formData.value = {
    id: row.id,
    nickname: row.nickname,
    phone: row.phone,
    points: row.points
  }
  openDialogVisible()
}

// 删除
import { deleteMemberService } from '@/api/user';
const handleDelete = async (id) => {
  const res = await deleteMemberService(id)
  if (res.code === 0) {
    ElMessage.success(res.message)
    getMemberList()
  }
}

// 打开对话框
const openDialogVisible = () => {
  formDialogVisible.value = true
}

// 表单校验规则
const checkForm = ref({
  nickname: [
    { required: true, message: '请输入会员昵称', trigger: 'change' },
  ],
  phone: [
    { required: true, message: '请输入联系方式', trigger: 'change' },
  ],
  points: [
    { required: true, message: '请输入积分', trigger: 'change' },
  ]
})

// 提交表单
import { updateMemberService } from '@/api/user';
const formRef = ref()
const submitForm = () => {
  formRef.value.validate().then(async () => {
    const res = await updateMemberService(formData.value)
    if (res.code === 0) {
      ElMessage.success(res.message)
      formDialogVisible.value = false
      getMemberList()
    }
  }).catch(() => { })
};

// 分页逻辑处理
const handlePageChange = (page) => {
  pageNo.value = page
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
}

.aside-box {
  display: flex;
  align-items: center;

  .button {
    margin-right: 10px;
    color: #fff;
    border-radius: 6px;
  }

  .input {
    width: 220px;
  }
}

.main-box {
  .switch-status {
    margin-right: 1vw;
    --el-switch-on-color: #67cad6;
  }

  .operation-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .operation {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}

.dialog-box {
  :deep(.el-dialog__body) {
    padding: 0 10%;
  }

  :deep(.el-dialog__footer) {
    display: flex;
    justify-content: center;
  }

  .upload-container {
    :deep(.el-upload) {
      border: 1px dashed #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
      overflow: hidden;
      transition: 0.2s;
    }

    :deep(.el-upload:hover) {
      border-color: #67cad6;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
  }

  .footer {
    width: 40%;
    display: flex;
    justify-content: space-between;

    .button {
      color: #fff;
    }
  }
}
</style>
